<template>
  <div v-title data-title="怪兽编程">
    <el-container>

      <el-main class="me-articles">

        <article-scroll-page></article-scroll-page>

      </el-main>

      <el-aside>

        <card-me class="me-area"></card-me>
        <card-tag :tags="hotTags"></card-tag>

        <card-article cardHeader="最热文章" :articles="hotArticles"></card-article>

        <card-archive cardHeader="文章归档" :archives="archives"></card-archive>

        <card-article cardHeader="最新文章" :articles="newArticles"></card-article>

      </el-aside>

    </el-container>

    <!-- 准备一个容器用来存放音乐播放器 -->
    <div id="aplayer"></div>

  </div>
</template>

<script>
import CardMe from '@/components/card/CardMe'
import CardArticle from '@/components/card/CardArticle'
import CardArchive from '@/components/card/CardArchive'
import CardTag from '@/components/card/CardTag'
import ArticleScrollPage from '@/views/common/ArticleScrollPage'

import {getArticles, getHotArtices, getNewArtices} from '@/api/article'
import {getHotTags} from '@/api/tag'
import {listArchives} from '@/api/article'
import {getAllMusic} from '@/api/music'
import APlayer from "APlayer"; // 引入音乐插件
import "APlayer/dist/APlayer.min.css"; // 引入音乐插件的样式


export default {
  name: 'Index',
  created() {

    this.getHotArtices()
    this.getNewArtices()
    this.getHotTags()
    this.listArchives()
  },
  data() {
    return {
      hotTags: [],
      hotArticles: [],
      newArticles: [],
      archives: [],
      a: [],
      audio: [ // 歌曲列表
      ],
      info: {
        lrcType: 0, //歌词模式<!-- 指定 lrcType 为 0，表示禁用歌词 -->
        fixed: false, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: true, // 开启自动播放
        preload: "auto", // 自动预加载歌曲
        loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: "list", //  播放模式，list列表播放, random随机播放
      },
    };
  },
  mounted() {
    this.getMusicList()

  },
  methods: {
    //请求
    getMusicList() {
      getAllMusic().then(({data}) => {
        this.audio = data
      })
    },
    getHotArtices() {
      let that = this
      getHotArtices().then(data => {
        that.hotArticles = data.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '最热文章加载失败!', showClose: true})
        }

      })

    },
    getNewArtices() {
      let that = this
      getNewArtices().then(data => {
        that.newArticles = data.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '最新文章加载失败!', showClose: true})
        }

      })

    },
    getHotTags() {
      let that = this
      getHotTags().then(data => {
        that.hotTags = data.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '最热标签加载失败!', showClose: true})
        }

      })
    },
    listArchives() {
      listArchives().then((data => {
        this.archives = data.data
      })).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
        }
      })
    }
  },
  watch: {
    audio(newValue, oldvalue) {
      new APlayer({
        container: document.getElementById("aplayer"),
        audio: newValue, // 音乐信息
        // 其他配置信息
        ...this.info
      });

    },
  },
  components: {
    'card-me': CardMe,
    'card-article': CardArticle,
    'card-tag': CardTag,
    ArticleScrollPage,
    CardArchive,
    APlayer
  }
}
</script>

<style scoped>

.el-container {
  width: 960px;
}

.el-aside {
  margin-left: 20px;
  width: 260px;
}

.el-main {
  padding: 0px;
  line-height: 16px;
}

.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 20px;
}
</style>
